<template>
  <div class="app-container">
    <p> 根路径和第一级会默认加载挂载信息, 其它路径请点击对应行获取组织挂载权限信息,因为界面大小的问题, 这个不会加载全部的挂载信息,只会每种类型取 2 个样例, 如需要加载全部挂载信息,请点击全部挂载</p>
    <el-table
      :data="groupTrees"
      size="mini"
      border
      stripe
      row-key="path"
      :tree-props="{'children':'children'}"
      highlight-current-row
      @row-click="clickTableRow"
    >
      <el-table-column type="index" width="55" />
      <el-table-column
        type="selection"
        width="55"
      />

      <el-table-column
        prop="name"
        label="分组名称"
        width="250"
      />
      <el-table-column
        label="挂载信息"
      >
        <template slot-scope="scope">
          {{ groupMountInfo(scope.row) }}
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openAllMountDialog(scope.row)">全部挂载</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialog.mount.visible" width="50%" :title="dialog.mount.path + ' 的权限挂载'">

      <el-row class="margin-bottom">
        <el-checkbox v-model="dialog.mount.includeChildGroup" @change="changeChildGroup">是否包含子组织</el-checkbox>

      </el-row>
      <el-row>
        <el-col :span="7">
          <div class="margin-bottom">挂载用户列表 {{ dialog.mount.mountInfo.users.length }}</div>
          <list-group :list="dialog.mount.mountInfo.users" />
        </el-col>
        <el-col :span="8" class="margin-left">
          <div class="margin-bottom">挂载角色列表 {{ dialog.mount.mountInfo.roles.length }}</div>
          <list-group :list="dialog.mount.mountInfo.roles" />
        </el-col>
        <el-col :span="8" class="margin-left">
          <div class="margin-bottom">挂载资源列表 {{ dialog.mount.mountInfo.resources.length }}</div>
          <list-group :list="dialog.mount.mountInfo.resources" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import security from '@/api/security'
import ListGroup from '@/components/ListGroup'

export default {
  name: 'authview',
  components: { ListGroup },
  data() {
    return {
      groupTrees: [],
      dialog: {
        mount: {
          visible: false,
          includeChildGroup: false,
          mountInfo: { users: [], roles: [], resources: [] },
          path: null
        }
      }
    }
  },
  mounted() {
    this.loadGroups()
  },
  methods: {
    changeChildGroup(value) {
      security.queryMount(this.dialog.mount.path, value).then(res => {
        this.dialog.mount.mountInfo = res.data
      })
    },
    openAllMountDialog(row) {
      this.dialog.mount.path = row.path
      this.dialog.mount.includeChildGroup = row.includeChildGroup

      if (!row.mountInfo) {
        security.queryMount(row.path, row.includeChildGroup).then(res => {
          this.dialog.mount.mountInfo = res.data
        })
      } else {
        this.dialog.mount.mountInfo = row.mountInfo
      }

      this.dialog.mount.visible = true
      this.dialog.mount.includeChildGroup = row.includeChildGroup
    },
    clickTableRow(row, column, event) {
      // this.mountMap[row.path] = {users: [],roles: [],resources: []};
      // let mountData = await this.loadGroupMount(row.path,false);
      security.queryMount(row.path, false).then(res => {
        this.$set(row, 'mountInfo', res.data)
      })
    },
    loadGroups() {
      security.accessGroups().then(res => {
        this.groupTrees = [res.data]

        // 将 / 和第一层数据加载所有信息挂载
        security.queryMount(this.groupTrees[0].path, false).then(res => {
          this.$set(this.groupTrees[0], 'mountInfo', res.data)
        })
        if (this.groupTrees[0].children) {
          for (let i = 0; i < this.groupTrees[0].children.length; i++) {
            security.queryMount(this.groupTrees[0].children[i].path, false).then(res => {
              this.$set(this.groupTrees[0].children[i], 'mountInfo', res.data)
            })
          }
        }
      })
    },
    groupMountInfo(row) {
      if (!row.mountInfo) {
        return undefined
      }
      // console.log(row.mountInfo,'rowmountinfo')
      const mountInfo = row.mountInfo
      mountInfo.users = mountInfo.users || []
      mountInfo.roles = mountInfo.roles || []
      mountInfo.resources = mountInfo.resources || []

      const users = mountInfo.users.slice(0, 2)
      const roles = mountInfo.roles.slice(0, 2)
      const resources = mountInfo.resources.slice(0, 2)

      const join = []
      let part = []
      for (let i = 0; i < users.length; i++) {
        part.push(users[i] + ' (User)')
      }

      join.push(part.join(','))
      part = []
      for (let i = 0; i < roles.length; i++) {
        part.push(roles[i] + ' (Role)')
      }

      join.push(part.join(','))
      part = []
      for (let i = 0; i < resources.length; i++) {
        part.push(resources[i] + ' (Resource)')
      }

      join.push(part.join(','))
      // console.log(join,'join')
      return join.join('\t\t')
    }
  }
}
</script>

<style scoped>
 .list-style{
   padding: 0;
   margin: 0;
   line-height: 2em;
   font-size: 18px;

   list-style-type: none;
 }
 .list-style>li{
   padding: 0 15px;
 }
 .mount-block{
   height: 200px;
   overflow-y: scroll;
 }
</style>
